<template>
  <div class="bg">
    <el-form  class="form-class" :model="user_login_form" :rules="rules" ref="user_login_form_ref">
      <h2>用户登录</h2><br/>
      <el-form-item prop="username">
        <el-input type="text" placeholder="用户名" v-model="user_login_form.username"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" placeholder="密码" v-model="user_login_form.password"></el-input>
      </el-form-item><br/><br/>
      <el-form-item>
        <el-button  type="primary" @click="loginBtn">登录</el-button> <el-button  type="primary" @click="toResiter">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import ElementUI from 'element-ui'
  import router from "../router";

  export default {
    data(){
      return{
        user_login_form:{
          username:'',
          password:''
        },
        rules:{
          username:[
            {required:true,message:'请输入用户名',trigger:'blur'}
          ],
          password:[
            {required:true,message:'请输入密码',trigger:'blur'},
            {min:4,max:8,message:'请输入4-8个字符',trigger:'blur'}
          ]
        }
      }
    },
    methods:{
      loginBtn(){
        this.$refs['user_login_form_ref'].validate( (valid) => {
          if(valid){
            this.$message({
              message:'进行登录',
              duration:1000,
              type:'success'
            });

            this.axios.post('/user/login',{"username":this.user_login_form.username,"password":this.user_login_form.password})
             .then(function (response) {
              console.log(response);
              if(response.status === 0){
                // alert('登录成功');
                router.push('/index');
              }else{
                // alert('登录失败： '+response.data.message);
                ElementUI.Message({
                  message:'登录失败： '+response.data.message,
                  duration:1000,
                  type:'error'
                })
              }
            }).catch(function (response) {
              alert('传输数据失败');
            });
          }else{
            this.$message({
              message:'请输入正确数据',
              duration:1000,
              type:'error'
            })
          }
        })
      },
      toResiter(){
        //引入element，可以使用的弹出对话框形式
        this.$message({
          message:'跳转注册',
          duration:1000,
          type:'success'
        })
        //路由，跳转到登录页面
        this.$router.push('/register');
      }
    }
  }
</script>

<style>
  .form-class {
    background-color: #ffffff;
    width: 300px;
    height: 320px;
    margin: 100px auto;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #cac6c6;
    box-shadow: 0 0 20px #cac6c6;
  }
</style>
